@strapi/admin 4.0.4 → 4.0.8

package/admin/src/components/UpgradePlanModal/index.js

@@ -70,9 +70,14 @@ const UpgradePlanModal = ({ onClose, isOpen }) => {
 
   return (
     <Portal>
-      <UpgradeWrapper>
+      <UpgradeWrapper onClick={onClose}>
         <FocusTrap onEscape={onClose}>
-          <UpgradeContainer aria-labelledby="upgrade-plan" background="neutral0" hasRadius>
+          <UpgradeContainer
+            onClick={e => e.stopPropagation()}
+            aria-labelledby="upgrade-plan"
+            background="neutral0"
+            hasRadius
+          >
             <img src={AirBalloon} alt="air-balloon" />
             <CloseButtonContainer>
               <IconButton onClick={onClose} aria-label="Close" icon={<Cross />} />

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/isValidJSONString.js

@@ -0,0 +1,15 @@
+const isValidJSONString = value => {
+  if (typeof value === 'string' && value.startsWith('"') && value.endsWith('"')) {
+    try {
+      JSON.parse(value);
+
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  return false;
+};
+
+export default isValidJSONString;

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/schema.js

@@ -1,18 +1,17 @@
-import {
-  get,
-  isBoolean,
-  isNumber,
-  isNull,
-  isObject,
-  isArray,
-  isEmpty,
-  isNaN,
-  toNumber,
-} from 'lodash';
+import get from 'lodash/get';
+import isBoolean from 'lodash/isBoolean';
+import isNumber from 'lodash/isNumber';
+import isNull from 'lodash/isNull';
+import isObject from 'lodash/isObject';
+import isEmpty from 'lodash/isEmpty';
+import isNaN from 'lodash/isNaN';
+import toNumber from 'lodash/toNumber';
 
 import * as yup from 'yup';
 import { translatedErrors as errorsTrads } from '@strapi/helper-plugin';
 
+import isValidJSONString from './isValidJSONString';
+
 yup.addMethod(yup.mixed, 'defined', function() {
   return this.test('defined', errorsTrads.required, value => value !== undefined);
 });
@@ -224,7 +223,7 @@ const createYupSchemaAttribute = (type, validations, options) => {
           return true;
         }
 
-        if (isNumber(value) || isNull(value) || isObject(value) || isArray(value)) {
+        if (isValidJSONString(value) || isNumber(value) || isNull(value) || isObject(value)) {
           return true;
         }
 

package/admin/src/content-manager/components/InputJSON/FieldWrapper.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Field } from '@strapi/design-system/Field';
+
+const FieldWrapper = ({ name, hint, error, children }) => {
+  const { formatMessage } = useIntl();
+  const errorMessage = error ? formatMessage({ id: error, defaultMessage: error }) : '';
+
+  return (
+    <Field name={name} hint={hint && formatMessage(hint)} error={errorMessage} id={name}>
+      {children}
+    </Field>
+  );
+};
+
+FieldWrapper.defaultProps = {
+  hint: undefined,
+  error: '',
+};
+
+FieldWrapper.propTypes = {
+  name: PropTypes.string.isRequired,
+  hint: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+  }),
+  error: PropTypes.string,
+  children: PropTypes.node.isRequired,
+};
+
+export default FieldWrapper;

package/admin/src/content-manager/components/InputJSON/Label.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
-import { Typography } from '@strapi/design-system/Typography';
+import { FieldLabel } from '@strapi/design-system/Field';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 
@@ -12,7 +12,7 @@ const LabelAction = styled(Box)`
   }
 `;
 
-const Label = ({ id, intlLabel, labelAction, name }) => {
+const Label = ({ intlLabel, labelAction, name, required }) => {
   const { formatMessage } = useIntl();
   const label = intlLabel?.id
     ? formatMessage(
@@ -23,15 +23,7 @@ const Label = ({ id, intlLabel, labelAction, name }) => {
 
   return (
     <Flex>
-      <Typography
-        textColor="neutral800"
-        htmlFor={id || name}
-        variant="pi"
-        fontWeight="bold"
-        as="label"
-      >
-        {label}
-      </Typography>
+      <FieldLabel required={required}>{label}</FieldLabel>
       {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
     </Flex>
   );
@@ -41,6 +33,7 @@ Label.defaultProps = {
   id: undefined,
   intlLabel: undefined,
   labelAction: undefined,
+  required: false,
 };
 
 Label.propTypes = {
@@ -52,6 +45,7 @@ Label.propTypes = {
   }),
   labelAction: PropTypes.element,
   name: PropTypes.string.isRequired,
+  required: PropTypes.bool,
 };
 
 export default Label;

package/admin/src/content-manager/components/InputJSON/index.js

@@ -9,11 +9,11 @@ import PropTypes from 'prop-types';
 import cm from 'codemirror';
 import trimStart from 'lodash/trimStart';
 import { Stack } from '@strapi/design-system/Stack';
+import { FieldHint, FieldError } from '@strapi/design-system/Field';
 import jsonlint from './jsonlint';
 import { EditorWrapper, StyledBox } from './components';
-import Hint from '../Hint';
 import Label from './Label';
-import FieldError from './FieldError';
+import FieldWrapper from './FieldWrapper';
 
 const WAIT = 600;
 const stringify = JSON.stringify;
@@ -80,7 +80,7 @@ class InputJSON extends React.Component {
     try {
       if (value === null) return this.codeMirror.setValue('');
 
-      const nextValue = typeof value !== 'string' ? stringify(value, null, 2) : value;
+      const nextValue = stringify(value, null, 2);
 
       return this.codeMirror.setValue(nextValue);
     } catch (err) {
@@ -159,30 +159,28 @@ class InputJSON extends React.Component {
     }
 
     return (
-      <Stack size={1}>
-        <Label
-          intlLabel={this.props.intlLabel}
-          labelAction={this.props.labelAction}
-          name={this.props.name}
-        />
-        <StyledBox error={this.props.error}>
-          <EditorWrapper disabled={this.props.disabled}>
-            <textarea
-              ref={this.editor}
-              autoComplete="off"
-              id={this.props.id || this.props.name}
-              defaultValue=""
-            />
-          </EditorWrapper>
-        </StyledBox>
-        <Hint
-          description={this.props.description}
-          name={this.props.name}
-          id={this.props.id}
-          error={this.props.error}
-        />
-        <FieldError id={this.props.id} name={this.props.name} error={this.props.error} />
-      </Stack>
+      <FieldWrapper name={this.props.name} hint={this.props.description} error={this.props.error}>
+        <Stack size={1}>
+          <Label
+            intlLabel={this.props.intlLabel}
+            labelAction={this.props.labelAction}
+            name={this.props.name}
+            required={this.props.required}
+          />
+          <StyledBox error={this.props.error}>
+            <EditorWrapper disabled={this.props.disabled}>
+              <textarea
+                ref={this.editor}
+                autoComplete="off"
+                id={this.props.id || this.props.name}
+                defaultValue=""
+              />
+            </EditorWrapper>
+          </StyledBox>
+          <FieldHint />
+          <FieldError />
+        </Stack>
+      </FieldWrapper>
     );
   }
 }
@@ -196,6 +194,7 @@ InputJSON.defaultProps = {
   labelAction: undefined,
   onChange: () => {},
   value: null,
+  required: false,
 };
 
 InputJSON.propTypes = {
@@ -216,6 +215,7 @@ InputJSON.propTypes = {
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func,
   value: PropTypes.any,
+  required: PropTypes.bool,
 };
 
 export default InputJSON;

package/admin/src/content-manager/components/PreviewWysiwyg/Wrapper.js

@@ -23,6 +23,10 @@ const Wrapper = styled.div`
     margin-block-end: 10px;
   }
 
+  p {
+    margin-bottom: 10px;
+  }
+
   h1 {
     font-size: ${36 / 16}rem;
     font-weight: 600;

package/admin/src/content-manager/components/PreviewWysiwyg/utils/mdRenderer.js

@@ -20,7 +20,7 @@ loadCss();
 const md = new Markdown({
   html: true, // Enable HTML tags in source
   xhtmlOut: false,
-  breaks: false,
+  breaks: true,
   langPrefix: 'language-',
   linkify: true,
   typographer: true,

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js

@@ -121,6 +121,10 @@ const DraggedItem = ({
       if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
         return;
       }
+      // If They are not in the same level, should not move
+      if (dragPath.split('.').length !== hoverPath.split('.').length) {
+        return;
+      }
       // Time to actually perform the action in the data
       moveComponentField(pathToComponentArray, dragIndex, hoverIndex);
 

package/admin/src/content-manager/components/Wysiwyg/Editor.js

@@ -12,6 +12,7 @@ const Editor = ({
   editorRef,
   error,
   isPreviewMode,
+  isExpandMode,
   name,
   onChange,
   placeholder,
@@ -64,7 +65,7 @@ const Editor = ({
 
   return (
     <EditorAndPreviewWrapper>
-      <EditorStylesContainer disabled={disabled || isPreviewMode}>
+      <EditorStylesContainer isExpandMode={isExpandMode} disabled={disabled || isPreviewMode}>
         <textarea ref={textareaRef} />
       </EditorStylesContainer>
       {isPreviewMode && <PreviewWysiwyg data={value} />}
@@ -76,6 +77,7 @@ Editor.defaultProps = {
   disabled: false,
   error: undefined,
   isPreviewMode: false,
+  isExpandMode: false,
   placeholder: '',
   value: '',
 };
@@ -85,6 +87,7 @@ Editor.propTypes = {
   editorRef: PropTypes.shape({ current: PropTypes.any }).isRequired,
   error: PropTypes.string,
   isPreviewMode: PropTypes.bool,
+  isExpandMode: PropTypes.bool,
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   placeholder: PropTypes.string,

package/admin/src/content-manager/components/Wysiwyg/EditorStylesContainer.js

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 /* stylelint-disable */
 export const EditorStylesContainer = styled.div`
   cursor: ${({ disabled }) => (disabled ? 'not-allowed !important' : 'auto')};
+  height: 100%;
   /* BASICS */
   .CodeMirror-placeholder {
     color: ${({ theme }) => theme.colors.neutral600} !important;
@@ -12,7 +13,7 @@ export const EditorStylesContainer = styled.div`
   .CodeMirror {
     /* Set height, width, borders, and global font properties here */
     font-size: ${14 / 16}rem;
-    height: 290px;
+    height: ${({ isExpandMode }) => (isExpandMode ? '100%' : '290px')};
     color: ${({ theme }) => theme.colors.neutral800};
     direction: ltr;
     font-family: --apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,

package/admin/src/content-manager/components/Wysiwyg/WysiwygNav.js

@@ -28,7 +28,9 @@ import {
 } from './WysiwygStyles';
 
 const WysiwygNav = ({
+  disabled,
   editorRef,
+  isExpandMode,
   isPreviewMode,
   onActionClick,
   onToggleMediaLib,
@@ -46,7 +48,7 @@ const WysiwygNav = ({
     setVisiblePopover(prev => !prev);
   };
 
-  if (isPreviewMode) {
+  if (disabled || isPreviewMode) {
     return (
       <Box padding={2} background="neutral100">
         <Flex justifyContent="space-between">
@@ -87,12 +89,14 @@ const WysiwygNav = ({
             <MoreButton disabled id="more" label="More" icon={<More />} />
           </Flex>
 
-          <Button onClick={onTogglePreviewMode} variant="tertiary" id="preview">
-            {formatMessage({
-              id: 'components.Wysiwyg.ToggleMode.markdown-mode',
-              defaultMessage: 'Markdown mode',
-            })}
-          </Button>
+          {!isExpandMode && (
+            <Button onClick={onTogglePreviewMode} variant="tertiary" id="preview">
+              {formatMessage({
+                id: 'components.Wysiwyg.ToggleMode.markdown-mode',
+                defaultMessage: 'Markdown mode',
+              })}
+            </Button>
+          )}
         </Flex>
       </Box>
     );
@@ -149,7 +153,7 @@ const WysiwygNav = ({
           />
           {visiblePopover && (
             <Popover centered source={buttonMoreRef} spacing={4} id="popover">
-              <FocusTrap onEscape={handleTogglePopover}>
+              <FocusTrap onEscape={handleTogglePopover} restoreFocus={false}>
                 <Flex>
                   <IconButtonGroupMargin>
                     <CustomIconButton
@@ -235,7 +239,9 @@ WysiwygNav.defaultProps = {
 };
 
 WysiwygNav.propTypes = {
+  disabled: PropTypes.bool.isRequired,
   editorRef: PropTypes.shape({ current: PropTypes.any }).isRequired,
+  isExpandMode: PropTypes.bool.isRequired,
   isPreviewMode: PropTypes.bool,
   onActionClick: PropTypes.func,
   onToggleMediaLib: PropTypes.func,

package/admin/src/content-manager/components/Wysiwyg/WysiwygStyles.js

@@ -45,6 +45,7 @@ export const IconButtonGroupMargin = styled(IconButtonGroup)`
 
 export const EditorAndPreviewWrapper = styled.div`
   position: relative;
+  height: calc(100% - 48px);
 `;
 
 // FOOTER

package/admin/src/content-manager/components/Wysiwyg/index.js

@@ -144,15 +144,18 @@ const Wysiwyg = ({
           onCollapse={handleToggleExpand}
         >
           <WysiwygNav
+            isExpandMode={isExpandMode}
             editorRef={editorRef}
             isPreviewMode={isPreviewMode}
             onActionClick={handleActionClick}
             onToggleMediaLib={handleToggleMediaLib}
             onTogglePreviewMode={isExpandMode ? undefined : handleTogglePreviewMode}
+            disabled={disabled}
           />
 
           <Editor
             disabled={disabled}
+            isExpandMode={isExpandMode}
             editorRef={editorRef}
             error={errorMessage}
             isPreviewMode={isPreviewMode}
@@ -185,7 +188,7 @@ const Wysiwyg = ({
 
 Wysiwyg.defaultProps = {
   description: null,
-  disabled: true,
+  disabled: false,
   error: '',
   labelAction: undefined,
   placeholder: null,

package/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFields.js

@@ -41,9 +41,7 @@ const DisplayedFields = ({ editLayout, editLayoutRemainingFields, onRemoveField,
       <Box padding={4} hasRadius borderStyle="dashed" borderWidth="1px" borderColor="neutral300">
         <Stack size={2}>
           {editLayout.map((row, index) => (
-            <React.Fragment key={row.rowId}>
-              <RowsLayout row={row} rowIndex={index} onRemoveField={onRemoveField} />
-            </React.Fragment>
+            <RowsLayout key={row.rowId} row={row} rowIndex={index} onRemoveField={onRemoveField} />
           ))}
           <SimpleMenu
             id="label"

package/admin/src/content-manager/pages/EditSettingsView/components/FormModal.js

@@ -26,7 +26,7 @@ const HeaderContainer = styled(Flex)`
   }
 `;
 
-const FormModal = ({ onToggle, onChange, onSubmit, type }) => {
+const FormModal = ({ onToggle, onMetaChange, onSizeChange, onSubmit, type }) => {
   const { selectedField } = useLayoutDnd();
   const { formatMessage } = useIntl();
 
@@ -61,7 +61,7 @@ const FormModal = ({ onToggle, onChange, onSubmit, type }) => {
         </ModalHeader>
         <ModalBody>
           <Grid gap={4}>
-            <ModalForm onChange={onChange} />
+            <ModalForm onMetaChange={onMetaChange} onSizeChange={onSizeChange} />
           </Grid>
         </ModalBody>
         <ModalFooter
@@ -84,7 +84,8 @@ const FormModal = ({ onToggle, onChange, onSubmit, type }) => {
 FormModal.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   onToggle: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
+  onMetaChange: PropTypes.func.isRequired,
+  onSizeChange: PropTypes.func.isRequired,
   type: PropTypes.string.isRequired,
 };
 

package/admin/src/content-manager/pages/EditSettingsView/components/ModalForm.js

@@ -1,6 +1,8 @@
 import React, { useMemo, useCallback } from 'react';
+import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import { GridItem } from '@strapi/design-system/Grid';
+import { Select, Option } from '@strapi/design-system/Select';
 import { useSelector, shallowEqual } from 'react-redux';
 import { useIntl } from 'react-intl';
 import { useLayoutDnd } from '../../../hooks';
@@ -9,7 +11,11 @@ import { makeSelectModelAndComponentSchemas } from '../../App/selectors';
 import getTrad from '../../../utils/getTrad';
 import GenericInput from './GenericInput';
 
-const ModalForm = ({ onChange }) => {
+const FIELD_SIZES = [[4, '33%'], [6, '50%'], [8, '66%'], [12, '100%']];
+
+const NON_RESIZABLE_FIELD_TYPES = ['dynamiczone', 'component', 'json', 'richtext'];
+
+const ModalForm = ({ onMetaChange, onSizeChange }) => {
   const { formatMessage } = useIntl();
   const { modifiedData, selectedField, attributes, fieldForm } = useLayoutDnd();
   const schemasSelector = useMemo(makeSelectModelAndComponentSchemas, []);
@@ -44,22 +50,21 @@ const ModalForm = ({ onChange }) => {
     [selectedField, componentsAndModelsPossibleMainFields, modifiedData]
   );
 
-  return formToDisplay.map(meta => {
+  const metaFields = formToDisplay.map(meta => {
     const formType = get(attributes, [selectedField, 'type']);
 
-    if (formType === 'dynamiczone' && !['label', 'description'].includes(meta)) {
-      return null;
-    }
-
-    if ((formType === 'component' || formType === 'media') && meta !== 'label') {
+    if (
+      formType === 'dynamiczone' ||
+      (formType === 'component' && !['label', 'description'].includes(meta))
+    ) {
       return null;
     }
 
-    if ((formType === 'json' || formType === 'boolean') && meta === 'placeholder') {
+    if (formType === 'component' && meta !== 'label') {
       return null;
     }
 
-    if (formType === 'richtext' && meta === 'editable') {
+    if (['media', 'json', 'boolean'].includes(formType) && meta === 'placeholder') {
       return null;
     }
 
@@ -78,13 +83,49 @@ const ModalForm = ({ onChange }) => {
             id: get(getInputProps(meta), 'label.id', 'app.utils.defaultMessage'),
           })}
           name={meta}
-          onChange={onChange}
-          value={get(fieldForm, meta, '')}
+          onChange={onMetaChange}
+          value={get(fieldForm, ['metadata', meta], '')}
           options={getSelectedItemSelectOptions(formType)}
         />
       </GridItem>
     );
   });
+
+  const canResize = !NON_RESIZABLE_FIELD_TYPES.includes(attributes[selectedField].type);
+
+  const sizeField = (
+    <GridItem col={6} key="size">
+      <Select
+        value={fieldForm?.size}
+        name="size"
+        onChange={value => {
+          onSizeChange({ name: selectedField, value });
+        }}
+        label={formatMessage({
+          id: getTrad('containers.SettingPage.editSettings.size.label'),
+          defaultMessage: 'Size',
+        })}
+      >
+        {FIELD_SIZES.map(([value, label]) => (
+          <Option key={value} value={value}>
+            {label}
+          </Option>
+        ))}
+      </Select>
+    </GridItem>
+  );
+
+  return (
+    <>
+      {metaFields}
+      {canResize && sizeField}
+    </>
+  );
+};
+
+ModalForm.propTypes = {
+  onMetaChange: PropTypes.func.isRequired,
+  onSizeChange: PropTypes.func.isRequired,
 };
 
 export default ModalForm;

package/admin/src/content-manager/pages/EditSettingsView/index.js

@@ -110,6 +110,14 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
     });
   };
 
+  const handleSizeChange = ({ name, value }) => {
+    dispatch({
+      type: 'ON_CHANGE_SIZE',
+      name,
+      value,
+    });
+  };
+
   const handleMetaSubmit = e => {
     e.preventDefault();
     dispatch({
@@ -365,7 +373,8 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
             onSubmit={handleMetaSubmit}
             onToggle={handleToggleModal}
             type={get(attributes, [metaToEdit, 'type'], '')}
-            onChange={handleMetaChange}
+            onMetaChange={handleMetaChange}
+            onSizeChange={handleSizeChange}
           />
         )}
       </Main>

package/admin/src/content-manager/pages/EditSettingsView/reducer.js

@@ -4,7 +4,7 @@ import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 
 import { arrayMoveItem } from '../../utils';
-import { formatLayout, getInputSize } from './utils/layout';
+import { formatLayout, getDefaultInputSize, getFieldSize, setFieldSize } from './utils/layout';
 
 const initialState = {
   fieldForm: {},
@@ -45,7 +45,7 @@ const reducer = (state = initialState, action) =>
       }
       case 'ON_ADD_FIELD': {
         const newState = cloneDeep(state);
-        const size = getInputSize(
+        const size = getDefaultInputSize(
           get(newState, ['modifiedData', 'attributes', action.name, 'type'], '')
         );
         const listSize = get(newState, layoutPathEdit, []).length;
@@ -76,7 +76,11 @@ const reducer = (state = initialState, action) =>
         break;
       }
       case 'ON_CHANGE_META': {
-        set(draftState, ['metaForm', ...action.keys], action.value);
+        set(draftState, ['metaForm', 'metadata', ...action.keys], action.value);
+        break;
+      }
+      case 'ON_CHANGE_SIZE': {
+        set(draftState, ['metaForm', 'size'], action.value);
         break;
       }
       case 'ON_RESET': {
@@ -168,11 +172,28 @@ const reducer = (state = initialState, action) =>
       }
       case 'SET_FIELD_TO_EDIT': {
         draftState.metaToEdit = action.name;
-        draftState.metaForm = get(state, ['modifiedData', 'metadatas', action.name, 'edit'], {});
+        draftState.metaForm = {
+          metadata: get(state, ['modifiedData', 'metadatas', action.name, 'edit'], {}),
+          size:
+            getFieldSize(action.name, state.modifiedData?.layouts?.edit) ?? getDefaultInputSize(),
+        };
+
         break;
       }
       case 'SUBMIT_META_FORM': {
-        set(draftState, ['modifiedData', 'metadatas', state.metaToEdit, 'edit'], state.metaForm);
+        set(
+          draftState,
+          ['modifiedData', 'metadatas', state.metaToEdit, 'edit'],
+          state.metaForm.metadata
+        );
+
+        const layoutsCopy = cloneDeep(get(state, layoutPathEdit, []));
+        const nextLayoutValue = setFieldSize(state.metaToEdit, state.metaForm.size, layoutsCopy);
+
+        if (nextLayoutValue.length > 0) {
+          set(draftState, layoutPathEdit, formatLayout(nextLayoutValue));
+        }
+
         break;
       }
       case 'SUBMIT_SUCCEEDED': {